<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>css/imageScroller.css">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>css/estilo.css">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Acores Comunicacao </title>
    </head>
    <body>
        <div id="site">
            <?php echo getCabesario(); ?>
            <br /><br /><br />
            <div id="outerContainer">
                <div id="imageScroller">
                    <div id="viewer" class="js-disabled">
                        <a class="wrapper" href="#" title=""><img class="logo" id="img1" src="<?php echo base_url(); ?>imagens/logos/1.jpg" alt=""></a>
                        <a class="wrapper" href="#" title=""><img class="logo" id="img3" src="<?php echo base_url(); ?>imagens/logos/3.jpg" alt=""></a>
                        <a class="wrapper" href="#" title=""><img class="logo" id="img4" src="<?php echo base_url(); ?>imagens/logos/4.jpg" alt=""></a>
                        <a class="wrapper" href="#" title=""><img class="logo" id="img5" src="<?php echo base_url(); ?>imagens/logos/5.jpg" alt=""></a>
                        <a class="wrapper" href="#" title=""><img class="logo" id="img6" src="<?php echo base_url(); ?>imagens/logos/6.jpg" alt=""></a>
                        <a class="wrapper" href="#" title=""><img class="logo" id="img7" src="<?php echo base_url(); ?>imagens/logos/7.jpg" alt=""></a>
                        <a class="wrapper" href="#" title=""><img class="logo" id="img8" src="<?php echo base_url(); ?>imagens/logos/8.jpg" alt=""></a>
                    </div>
                </div>
            </div>
            <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
            <script type="text/javascript">
                $(function() {
			
                    //remove js-disabled class
                    $("#viewer").removeClass("js-disabled");
			
                    //create new container for images
                    $("<div>").attr("id", "container").css({ position:"absolute"}).width($(".wrapper").length * 170).height(170).appendTo("div#viewer");
			  	
                    //add images to container
                    $(".wrapper").each(function() {
                        $(this).appendTo("div#container");
                    });
				
                    //work out duration of anim based on number of images (1 second for each image)
                    var duration = $(".wrapper").length * 4000;
				
                    //store speed for later (distance / time)
                    var speed = (parseInt($("div#container").width()) + parseInt($("div#viewer").width())) / duration;
								
                    //set direction
                    var direction = "rtl";
				
                    //set initial position and class based on direction
                    (direction == "rtl") ? $("div#container").css("left", $("div#viewer").width()).addClass("rtl") : $("div#container").css("left", 0 - $("div#container").width()).addClass("ltr") ;
				
                    //animator function
                    var animator = function(el, time, dir) {
				 
                        //which direction to scroll
                        if(dir == "rtl") {
					  
                            //add direction class
                            el.removeClass("ltr").addClass("rtl");
					 		
                            //animate the el
                            el.animate({ left:"-" + el.width() + "px" }, time, "linear", function() {
												
                                //reset container position
                                $(this).css({ left:$("div#imageScroller").width(), right:"" });
							
                                //restart animation
                                animator($(this), duration, "rtl");
							
                                //hide controls if visible
                                ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;			
											
                            });
                        } else {
					
                            //add direction class
                            el.removeClass("rtl").addClass("ltr");
					
                            //animate the el
                            el.animate({ left:$("div#viewer").width() + "px" }, time, "linear", function() {
												
                                //reset container position
                                $(this).css({ left:0 - $("div#container").width() });
							
                                //restart animation
                                animator($(this), duration, "ltr");
							
                                //hide controls if visible
                                ($("div#controls").length > 0) ? $("div#controls").slideUp("slow").remove() : null ;			
                            });
                        }
                    }
				
                    //start anim
                    animator($("div#container"), duration, direction);
				
                    //pause on mouseover
                    $("a.wrapper").live("mouseover", function() {
				  
                        //stop anim
                        $("div#container").stop(true);
					
                        //show controls
                        ($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
                        ($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
                        ($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;
					
                        //variable to hold trigger element
                        var title = $(this).attr("title");
					
                        //add p if doesn't exist, update it if it does
                        ($("p#title").length == 0) ? $("<p>").attr("id", "title").text(title).appendTo("div#controls") : $("p#title").text(title) ;
                    });
				
                    //restart on mouseout
                    $("a.wrapper").live("mouseout", function(e) {
				  
                        //hide controls if not hovering on them
                        (e.relatedTarget == null) ? null : (e.relatedTarget.id != "controls") ? $("div#controls").slideUp("slow").remove() : null ;
					
                        //work out total travel distance
                        var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
														
                        //work out distance left to travel
                        var distanceLeft = ($("div#container").hasClass("ltr")) ? totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width())) : totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left")))) ;
					
                        //new duration is distance left / speed)
                        var newDuration = distanceLeft / speed;
				
                        //restart anim
                        animator($("div#container"), newDuration, $("div#container").attr("class"));

                    });
												
                    //handler for ltr button
                    $("#ltr").live("click", function() {
				 					
                        //stop anim
                        $("div#container").stop(true);
				
                        //swap class names
                        $("div#container").removeClass("rtl").addClass("ltr");
										
                        //work out total travel distance
                        var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());
					
                        //work out remaining distance
                        var distanceLeft = totalDistance - (parseInt($("div#container").css("left")) + parseInt($("div#container").width()));
					
                        //new duration is distance left / speed)
                        var newDuration = distanceLeft / speed;
					
                        //restart anim
                        animator($("div#container"), newDuration, "ltr");
                    });
				
                    //handler for rtl button
                    $("#rtl").live("click", function() {
										
                        //stop anim
                        $("div#container").stop(true);
					
                        //swap class names
                        $("div#container").removeClass("ltr").addClass("rtl");
					
                        //work out total travel distance
                        var totalDistance = parseInt($("div#container").width()) + parseInt($("div#viewer").width());

                        //work out remaining distance
                        var distanceLeft = totalDistance - (parseInt($("div#viewer").width()) - (parseInt($("div#container").css("left"))));
					
                        //new duration is distance left / speed)
                        var newDuration = distanceLeft / speed;
				
                        //restart anim
                        animator($("div#container"), newDuration, "rtl");
                    });
                });
            </script>
            <br /><br /><br />
               
            <?php echo getRodape(); ?>
        </div>
    </body>
</html>